<template>
	<view class="box">
		<!-- 头部 -->
		<view class="tou">

			<view style="border-bottom: 3px solid #cf7874;color: #cf7874;padding-bottom: 15rpx;">
				热点
			</view>

		</view>

		<!-- 轮播图 -->
		<view class="lunb">
			<view class="content">
				<uni-swiper-dot class="uni-swiper-dot-box" :info="info" :current="current" :mode="mode"
					:dots-styles="dotsStyles" field="content">
					<swiper class="swiper-box" @change="change" :current="swiperDotIndex" autoplay="true"
						:interval="2000" :duration="500">
						<swiper-item v-for="(item, index) in info" :key="index">
							<image style="width: 100%;" :src="item.url" mode=""></image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
		</view>

		<!-- 内容 -->
		<view class="neir">

			<view class="neir_view">
				<image style="width: 30%;height: 150rpx;border-radius: 15rpx;"
					src="https://tse3-mm.cn.bing.net/th/id/OIP-C.C6-vTFtupqhUofFjDVVD6QHaEq?w=260&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"
					mode=""></image>
				<view class="xinwennei">
					<view class="xinwennei1">
						转需!郑州市主城区社区卫生服务中心乡镇卫生院发热诊室名单..
					</view>
					<view class="xinwennei2">
						<text>郑州发布</text>
						<text>2022-12-18</text>
					</view>
				</view>
			</view>
			<view class="neir_view">
				<image style="width: 30%;height: 150rpx;border-radius: 15rpx;"
					src="https://tse3-mm.cn.bing.net/th/id/OIP-C.C6-vTFtupqhUofFjDVVD6QHaEq?w=260&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"
					mode=""></image>
				<view class="xinwennei">
					<view class="xinwennei1">
						转需!郑州市主城区社区卫生服务中心乡镇卫生院发热诊室名单..
					</view>
					<view class="xinwennei2">
						<text>郑州发布</text>
						<text>2022-12-18</text>
					</view>
				</view>
			</view>
			<view class="neir_view">
				<image style="width: 30%;height: 150rpx;border-radius: 15rpx;"
					src="https://tse3-mm.cn.bing.net/th/id/OIP-C.C6-vTFtupqhUofFjDVVD6QHaEq?w=260&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"
					mode=""></image>
				<view class="xinwennei">
					<view class="xinwennei1">
						转需!郑州市主城区社区卫生服务中心乡镇卫生院发热诊室名单..
					</view>
					<view class="xinwennei2">
						<text>郑州发布</text>
						<text>2022-12-18</text>
					</view>
				</view>
			</view>
			<view class="neir_view">
				<image style="width: 30%;height: 150rpx;border-radius: 15rpx;"
					src="https://tse3-mm.cn.bing.net/th/id/OIP-C.C6-vTFtupqhUofFjDVVD6QHaEq?w=260&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"
					mode=""></image>
				<view class="xinwennei">
					<view class="xinwennei1">
						转需!郑州市主城区社区卫生服务中心乡镇卫生院发热诊室名单..
					</view>
					<view class="xinwennei2">
						<text>郑州发布</text>
						<text>2022-12-18</text>
					</view>
				</view>
			</view>
			<view class="neir_view">
				<image style="width: 30%;height: 150rpx;border-radius: 15rpx;"
					src="https://tse3-mm.cn.bing.net/th/id/OIP-C.C6-vTFtupqhUofFjDVVD6QHaEq?w=260&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"
					mode=""></image>
				<view class="xinwennei">
					<view class="xinwennei1">
						转需!郑州市主城区社区卫生服务中心乡镇卫生院发热诊室名单..
					</view>
					<view class="xinwennei2">
						<text>郑州发布</text>
						<text>2022-12-18</text>
					</view>
				</view>
			</view>



		</view>


	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 C'
					}
				],
				modeIndex: 3,
				current: 0,
				mode: 'nav',

			}
		},
		onLoad() {},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			// 轮播图，公告
			fun() {
				// 轮播图
				this.$api.Carousel({
					type: 2
				}).then((res) => {
					console.log(res);
				})
			}
		},
		mounted() {
			this.fun()
		},
	}
</script>

<style>
	.box {
		width: 750rpx;
		display: flex;
		flex-direction: column;
	}

	/* 内容 */
	.neir {
		padding: 10rpx;
		display: flex;
		flex-direction: column;
	}

	.neir_view {
		padding: 20rpx 0;
		border-bottom: 2rpx solid #ccc;
		display: flex;
		justify-content: space-between;
	}

	.xinwennei {
		width: 65%;
		display: flex;
		flex-direction: column;
	}

	.xinwennei1 {
		font-weight: 700;
		font-size: 28rpx;
		margin-bottom: 30rpx;
	}

	.xinwennei2 {
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 25rpx;
		color: #ccc;
	}

	/* 头部 */
	.tou {
		width: 100%;
		display: flex;
		padding: 20rpx;
		padding-bottom: 0;
	}
</style>
<style lang="scss">
	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
	}

	.swiper-item0 {
		background-color: #cee1fd;
	}

	.swiper-item1 {
		background-color: #b2cef7;
	}

	.swiper-item2 {
		background-color: #cee1fd;
	}

	.image {
		width: 750rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.uni-bg-red {
		background-color: #ff5a5f;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {

		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #6a6a6a;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}
</style>
